@babel/preset-env

What is @babel/preset-env?

The @babel/preset-env package is a Babel preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This is done by using compatibility tables to determine which features need to be transformed or polyfilled. It helps in writing next-gen JavaScript code while ensuring backward compatibility.

What are @babel/preset-env's main functionalities?

Transforming ES2015+ syntax to be ES5 compatible

This code sample shows an ES6 arrow function, which @babel/preset-env can transform into a function expression compatible with ES5 environments.

const arrowFunction = () => console.log('Hello, World!');

Optional configuration for browser or Node.js environment targets

This JSON configuration for Babel specifies which browsers should be supported by the output code, allowing @babel/preset-env to tailor the transformations and polyfills to only what is necessary for those environments.

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions", "> 1%", "ie >= 11"]
      }
    }]
  ]
}

Polyfilling missing features based on the target environment

This code sample uses `Array.from` and `Set`, which may not be available in older environments. @babel/preset-env can include the necessary polyfills for these features when configured with `useBuiltIns: 'usage'`.

Array.from(new Set([1, 2, 3]));

Other packages similar to @babel/preset-env

core-js

core-js is a modular standard library for JavaScript, which includes polyfills for ECMAScript up to 2021. It's often used in conjunction with Babel to polyfill newer JavaScript features in older environments. Unlike @babel/preset-env, core-js does not handle syntax transformations but focuses on providing polyfills for language features.

esbuild

esbuild is an extremely fast JavaScript bundler and minifier. It can compile modern JavaScript syntax to older versions for compatibility purposes, similar to what @babel/preset-env does. However, esbuild is more focused on the bundling aspect and aims to be a more comprehensive build tool rather than just a transpiler.

typescript

TypeScript is a superset of JavaScript that adds static types. The TypeScript compiler can also downlevel modern JavaScript to older versions, similar to @babel/preset-env. However, TypeScript's primary focus is on type safety and it requires type annotations, whereas @babel/preset-env is purely about compiling newer JavaScript syntax to older versions.

README

@babel/preset-env

A Babel preset for each environment.

See our website @babel/preset-env for more information or the issues associated with this package.

Install

Using npm:

npm install --save-dev @babel/preset-env

or using yarn:

yarn add @babel/preset-env --dev

Changelog

v7.26.0 (2024-10-25)

:rocket: New Feature

• babel-core, babel-generator, babel-parser, babel-plugin-syntax-import-assertions, babel-plugin-syntax-import-attributes, babel-preset-env, babel-standalone, babel-types
  • #16850 Enable import attributes parsing by default (@nicolo-ribaudo)
• babel-core
  • #16862 feat: support async plugin's pre/post (@timofei-iatsenko)
• babel-compat-data, babel-plugin-proposal-regexp-modifiers, babel-plugin-transform-regexp-modifiers, babel-preset-env, babel-standalone
  • #16692 Add transform-regexp-modifiers to preset-env (@JLHwung)
• babel-parser
  • #16849 feat: add startIndex parser option (@DylanPiercey)
• babel-generator, babel-parser, babel-plugin-syntax-flow
  • #16841 Always enable parsing of Flow enums (@nicolo-ribaudo)
• babel-helpers, babel-preset-typescript, babel-runtime-corejs3
  • #16794 Support import() in rewriteImportExtensions (@liuxingbaoyu)
• babel-generator, babel-parser
  • #16708 Add experimental format-preserving mode to @babel/generator (@nicolo-ribaudo)

:bug: Bug Fix

• babel-core
  • #16928 Workaround Node.js bug for parallel loading of TLA modules (@nicolo-ribaudo)
  • #16926 Fix loading of modules with TLA in Node.js 23 (@nicolo-ribaudo)

:nail_care: Polish

• babel-plugin-proposal-json-modules, babel-plugin-transform-json-modules, babel-standalone
  • #16924 Rename proposal-json-modules to transform-json-modules (@nicolo-ribaudo)

:house: Internal

• babel-code-frame, babel-highlight
  • #16896 Inline @babel/highlight in @babel/code-frame (@nicolo-ribaudo)
• babel-generator, babel-parser, babel-types
  • #16732 Add kind to TSModuleDeclaration (@liuxingbaoyu)

:running_woman: Performance

• babel-helper-module-transforms, babel-plugin-transform-modules-commonjs
  • #16882 perf: Improve module transforms (@liuxingbaoyu)